
<template>
  <!--  左侧导航啦-->
  <el-menu style="min-height:100%;overflow-x: hidden"
             background-color="#CDD0D6"
           :router="true"
           :collapse-transition="false"
           :default-active="activeIndex"
           collapse-transition="true"
           text-color="#303133"
           @select="handleRouter"
 >
    <!--    侧边栏标题-->
    <div style="height: 60px;line-height: 60px;text-align: center">
      <b style="color:black;font-weight: bold" v-show="logoTextShow" :style="{fontSize: size + 'px'}">学生信息</b>
    </div>
    <!--    侧边栏-->
    <el-sub-menu index="0">
      <template #title>
        <el-icon ><House/></el-icon>
        <b>主页</b>
      </template>
      <el-menu-item index="0-1" @click="toHpage">
        <el-icon><House/></el-icon>
        <span :style="{fontSize: size1 + 'px'}" style="color:rgb(22,43,100);"  >主页</span>
      </el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="1">
      <template #title>
        <el-icon>
          <Setting/>
        </el-icon>
       <b>学费管理</b>
      </template>
      <el-menu-item index="1-1" @click="toTuitionSubmit">
        <el-icon>
          <Money/>
        </el-icon>
        <span :style="{fontSize: size1 + 'px'}" style="color: rgb(22,43,100)">提交学费</span>
      </el-menu-item>
      <el-menu-item index="1-2" @click="TuitionRecords">
        <el-icon>
          <Money/>
        </el-icon>
        <span :style="{fontSize: size1 + 'px'}" style="color: rgb(22,43,100)">学费交付记录</span>
      </el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="2">
      <template #title>
        <el-icon>
          <Setting/>
        </el-icon>
        <b>学籍档案管理</b>
      </template>
      <el-menu-item index="2-1" @click="ToStudent">
        <el-icon>
          <Files/>
        </el-icon>
        <span :style="{fontSize: size1 + 'px'}" style="color: rgb(22,43,100)">学生信息</span>
      </el-menu-item>
      <el-menu-item index="2-2" @click="ToFileManage">
        <el-icon>
          <Files/>
        </el-icon>
        <span :style="{fontSize: size1 + 'px'}" style="color: rgb(22,43,100)">学籍录入</span>
      </el-menu-item>
      <el-menu-item index="2-3" @click="router.replace({name:'Echarts'})">
        <el-icon>
          <Files/>
        </el-icon>
        <span :style="{fontSize: size1 + 'px'}" style="color: rgb(22,43,100)">可视化</span>
      </el-menu-item>


    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>
        <el-icon><message/></el-icon>
        <b>课表成绩</b>
      </template>
      <el-menu-item index="3-1" @click="ToCourse">
        <el-icon><Files/></el-icon>
        <span :style="{fontSize: size1 + 'px'}" style="color: rgb(22,43,100)">课表页面</span>
      </el-menu-item>
      <el-menu-item index="3-2" @click="ToStudy">
        <el-icon><Files/></el-icon>
        <span :style="{fontSize: size1 + 'px'}" style="color: rgb(22,43,100)">成绩页面</span>
      </el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="4">
      <template #title>
        <el-icon><message/></el-icon>
        <b>人脸识别</b>
      </template>
      <el-menu-item index="4-1" @click="router.replace({name:'FaceRecognition'})">
        <el-icon><Files/></el-icon>
        <span :style="{fontSize: size1 + 'px'}" style="color: rgb(22,43,100)">人脸检测</span>
      </el-menu-item>
    </el-sub-menu>


  </el-menu>

</template>
<script setup>
import router from "../../router";

const logoTextShow = true
const size = 20
const size1 = 16

//跳转路由
function toHpage(){
  router.replace({name:'HPage'})
}
function toTuitionSubmit(){
  router.replace({name:'TuitionSubmit'})
}
function TuitionRecords(){
  router.replace({name:'TuitionRecords'})
}
function ToFileManage(){
  router.replace({name:'File'})
}
function ToCourse(){
  router.replace({name:'Course'})
}
function ToStudy(){
  router.replace({name:'Study'})
}
function  ToStudent(){
  router.replace({name:'Student'})
}
</script>


<style scoped>

</style>
